<template>
    <div style="overflow: auto; height: 750px;width: 100%">
        <el-card>
            <div slot="header">
                <el-row  style="margin: 20px 0">
                    <el-col :span="3" :offset="1">
                        <span style="font-size: 24px;font-weight: bold">我的图书</span>
                    </el-col>
                    <el-col :span="8" :offset="12">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage4"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="filter.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </el-col>
                </el-row>
            </div>
            <div v-for="(item, idx) in listData" :key="idx"  style="padding: 3px 2px ">
                <el-card shadow="hover">
                    <el-row  style="margin: 20px 0">
                        <el-col :span="3" :offset="4">
                            <span>图书名称：{{item.bookName}}</span>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <template v-if="item.status === 1">
                                <span>
                                     已归还&emsp;&emsp;&emsp;&emsp;
                                     归还时间：{{item.returnTime}}
                                </span>
                            </template>
                            <template v-if="item.status === 2">
                                <span>
                                    申请中 &emsp;&emsp;&emsp;&emsp;
                                    申请时间：{{item.createTime}}
                                </span>
                            </template>
                            <template v-if="item.status === 0">
                                <span>
                                    借用中 &emsp;&emsp;&emsp;&emsp;
                                    借用时间：{{item.borrowTime}}
                                </span>

                            </template>
                            <template v-else>
                            </template>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-button round size="small" @click="openCommentForm(item)">评价</el-button>&emsp;
                           <!-- <template v-if="item.status === 1">
                                <span>
                                <el-button round size="small"  @click="borrowBook(item)" >借阅</el-button>{{item.status}}
                                </span>
                            </template>-->
                            <template v-if="item.status === 0">
                                <span>
                                 <el-button round size="small" @click="returnBook(item)">归还</el-button>
                                </span>
                            </template>

                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </el-card>
        <el-dialog title="评价" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="评价内容" :label-width="formLabelWidth">
                    <el-input v-model="form.bookContent" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitComment">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import { getBookUseRecords } from '../../../module/reader/book/bookUseRecord';
    import { create } from '../../../module/admin/book/bookComment';
    import { returnBook } from '../../../module/admin/book/bookReturn';
    import { borrowing } from '../../../module/admin/book/bookBorrowing';
    import { Message } from 'element-ui';
    export default {
        data () {
            return {
                form: {
                    bookInfoId: '',
                    bookContent: '',
                    readerId: '',
                },
                listData: [],
                search:{
                    key: '',
                    value:'',
                },
                loading: true,
                visible2: false,
                filter: {
                    pageNum: 1,
                    pageSize: 10,
                },
                total: 0,
                currentPage4: 1,
                readerId: '',
                dialogFormVisible:false,
                formLabelWidth: '120px'
            }
        },
        mounted () {
            let readerId = sessionStorage.getItem('readerId');
            if (null !== readerId) {
                this.readerId = readerId;
            }
            this.search.key='readerId';
            this.search.value = this.readerId;
            getBookUseRecords(this);
        },
        methods: {
            borrowBook(bookUseRecord) {
                let _this = this;
                let param = {
                    bookId: bookUseRecord.bookId,
                    readerId: _this.readerId
                };
                borrowing(param).then(function (data) {
                    console.log('borrow---->>',data)
                    _this.$message({
                        type: 'success',
                        center: true,
                        message: '申请借阅图书成功!'
                    });
                    console.log(1)
                    getBookUseRecords(_this);
                }).catch(function (error) {
                    _this.$message({
                        type: 'error',
                        center: true,
                        message: '申请借阅图书失败!'
                    });
                });
            },
            returnBook(bookUseRecord) {
                let _this = this;
                _this.$confirm('是否归还该图书?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    returnBook(bookUseRecord.id).then(function (data) {
                        console.log('borrow---->>',data)
                        _this.$message({
                            type: 'success',
                            center: true,
                            message: '归还成功!'
                        });
                        getBookUseRecords(_this);
                    }).catch(function (error) {
                        _this.$message({
                            type: 'error',
                            center: true,
                            message: '归还失败'
                        });
                    });
                });
            },
            submitComment() {
                let _this = this;
                create(this.form).then(function (data) {
                    _this.$message({
                        type: 'success',
                        center: true,
                        message: '添加评价成功!'
                    });
                    _this.dialogFormVisible = false;
                    _this.form = {};
                    getBookUseRecords(_this);
                }).catch(function (error) {
                    _this.$message({
                        type: 'error',
                        center: true,
                        message: '添加评价失败!'
                    });
                });

            },
            openCommentForm(bookUseRecord) {
                let readerId = sessionStorage.getItem('readerId');
                if (readerId === '' || readerId === null ) {
                    this.$notify({
                        title: '提示',
                        message: '请先登录',
                        type: 'warning'
                    });
                } else {
                    this.form.bookInfoId = bookUseRecord.bookInfoId;
                    this.form.readerId = readerId;
                    this.dialogFormVisible = true
                }
            },
            handleSizeChange(val) {
                this.filter.pageSize = val;
                getBookUseRecords(this);
            },
            handleCurrentChange(val) {
                this.filter.pageNum = val;
                getBookUseRecords(this);
            }
        }
    }
</script>


<style>
</style>
